<template>
    <view style="height: calc(100% - 80rpx);">
        <view style="display: flex;justify-content: space-between;align-items: center;">
            <text style="min-width: 100rpx;margin-right: 10rpx;">共 <text style="color: red;">{{totalNum}}</text> 条</text>
            <u-search placeholder="请输入客户名称" @clear="cancelSearch" shape="square" @custom="searchFun" @search="searchFun" v-model="search"
                class="u-p-t-10 u-p-b-10" clearable></u-search>
        </view>

        <scroll-view style="height: calc(100% - 90rpx);" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll" @scrolltolower="lower">
            <view style="height: 100%;" v-if="listData.length">
                <view class="list">
                    <view v-for="(item, index) in listData" :key="index" class="list-item">
                        <text class="item-name">{{ item.customerName }}</text>
                        <text>负责人：{{item.ownerUserName ? item.ownerUserName : '--'}}</text>
                    </view>
                </view>
                <u-loadmore :status="downStatus" bgColor="#f2f2f2"></u-loadmore>
            </view>
            <u-empty v-else mode="list"></u-empty>
        </scroll-view>
    </view>
</template>

<script>
    import {
        crmCustomerQueryListAPI,
    } from "@/api/customer/customer.js";
    import crmTypeModel from '@/pages/customerManagement/model/crmTypeModel.js';
    export default {
        data() {
            return {
                dataValue: [],
                search: '',
                listData: [],
                downStatus: 'nomore',
                scrollTop: 0,
                pageSize: 15,
                currentPage: 1,
                totalNum: 0
            }
        },
        props: {
            /** 值 */
            value: {
                type: [String, Number],
                default: ''
            },
            /** 索引值 用于更新数据 */
            index: Number,
            /** 包含数据源 */
            item: Object,
            /**
             *  多选按钮
             */
            radio: {
                type: Boolean,
                default: false
            },
            disabled: {
                type: Boolean,
                default: false
            },
            showTable: {
                type: Boolean,
                default: false
            },
            /** 自定义数据源 */
            relation: Object,
        },
        computed: {

        },
        created() {
            this.search = this.value;
            this.searchFun();
        },
        methods: {

            scroll(e) {
                this.scrollTop = e.detail.scrollTop
            },
            
            lower() {
                if (this.listData.length < this.totalNum) {
                    this.downStatus = 'loading';
                    this.searchFun('more');
                } else {
                    this.downSstatus = 'nomore';
                }
            },

            searchFun(type) {
                let self = this;
                if (type == 'more') {
                    self.currentPage ++;
                } else {
                    self.scrollTop = 0;
                    self.currentPage = 1;
                }
                let params = {
                    page: self.currentPage,
                    limit: self.pageSize,
                    types: 'crm_customer',
                    customerName: self.search ? self.search.trim() : '',
                }
                crmCustomerQueryListAPI(params).then(res => {
                    self.downSstatus = 'nomore';
                    if (type == 'more') {
                        self.listData = self.listData.concat(res.data.list ? res.data.list : []);
                    } else {
                        self.listData = res.data.list ? res.data.list : [];
                    }
                    self.totalNum = res.data.totalRow;
                })
            },

            cancelSearch() {
                this.scrollTop = 0;
                this.search = '';
                self.totalNum = 0;
                this.listData = [];
            },

        }
    }
</script>

<style lang='scss' scoped>
    .menu-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px 0;
    }

    .menu-item {
        width: 120rpx;
        height: 120rpx;
        font-size: 22rpx;
        line-height: 120rpx;
        text-align: center;
        background-color: orange;
        color: #FFFFFF;
        border-radius: 5px;
        margin-right: 10px;
    }

    .list {
        width: 100%;
        min-height: calc(100%-40rpx);
        flex: 1;
    }

    .list-item {
        line-height: 50rpx;
        border-bottom: 1px solid #e4e7ed;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .item-name {
            font-weight: bold;
            font-size: 15px;
        }

        &:active {
            background-color: #f3f4f6;
        }
    }
</style>
